<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>历史价查询t</title>

    <!--引用样式重置文件-->
    <link rel="stylesheet/less" href="./css/base.less">
    <!--引用自己的样式文件-->
    <link rel="stylesheet/less" href="css/history.less">
    <!--引用less.js-->
    <script src="./lib/less/less.min.js"></script>
</head>
<body>
<!--头部区域-->
<header id="header">
    <a href="" class="arrow"><</a>

    <div class="txt">历史价格查询</div>
</header>
<section id="area">
    <div class="tit">
        <p>商品链接</p>
    </div>
    <input type="text" value="请通过购物APP使用分享或浏览器打开商品页面获取商品链接" id="tex"/>

    <div class="query ">
        <input type="submit" value="查询历史价格" id="sub"/>
        <input type="button" value="重置" id="but"/>
    </div>
    <div class="state">两步操作即可识别商品真假促销</div>
    <p>1.打开商品APP（如手机淘宝）复制商品链接</p>

    <p>2.打开慢慢手机APP,系统自动识别查历史价</p>
</section>
</body>
<script src="./lib/jquery/jquery.js"></script>
<script>
    //失去焦点和获取焦点
    var txt = document.getElementById("tex");
    //    console.log(txt)
    txt.onfocus = function () {
        if (this.value === "请通过购物APP使用分享或浏览器打开商品页面获取商品链接") {
            this.value = "";
        }
    };
    txt.onblur = function () {
        if (this.value === "") {
            this.value = "请通过购物APP使用分享或浏览器打开商品页面获取商品链接";
        }
    };
    //查询按钮点击
    var sub = document.getElementById("sub");
    var tex = document.getElementById('tex');
    console.log(sub);
    sub.onclick = function () {
        if (tex.value === '请通过购物APP使用分享或浏览器打开商品页面获取商品链接') {
            alert("请通过京东、天猫等App分享商品链接到输入框！");
            return;
        }

    }
</script>

</html>